<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>部门管理</title>
  {% include 'rbac/common/main-header.html' %}
</head>
<body>
<div style="padding: 16px">
  <div class="layui-card">
    <div class="layui-card-body">
      <table
        class="layui-hide"
        id="department-treeTable"
        lay-filter="department-treeTable"
      ></table>
    </div>
  </div>
</div>
</body>
<script type="text/html" id="department-toolbar">
  <div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="department-add">
      新增部门
    </button>
    <div class="layui-btn-group">
      <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="department-close">
        <i class="layui-icon layui-icon-screen-restore"></i>
        全部折叠
      </button>
      <button type="button" class="layui-btn layui-btn-sm layui-bg-orange" lay-event="department-open">
        <i class="layui-icon layui-icon-screen-full"></i>
        全部展开
      </button>
    </div>
  </div>
</script>
<script type="text/html" id="department-tool">
  <div class="layui-btn-container">
    <button
      type="button"
      class="layui-btn layui-btn-xs layui-bg-blue"
      lay-event="department-edit"
    >
      <i class="layui-icon layui-icon-edit"></i>编辑
    </button>
    <button
      type="button"
      class="layui-btn layui-btn-xs layui-bg-red"
      lay-event="department-remove"
    >
      <i class="layui-icon layui-icon-delete"></i>删除
    </button>
  </div>
</script>
{% include 'rbac/common/main-footer.html' %}
<script>
  let token = "{{ csrf_token }}";
  solve_csrf(token)

  layui.use(["treeTable", "popup"], function () {
    let treeTable = layui.treeTable;
    let popup = layui.popup;

    // 部门列表
    treeTable.render({
      elem: "#department-treeTable",
      url: "/api/v1/department/treetable/",
      height: "full-35",
      toolbar: "#department-toolbar",
      // page: true,
      cols: [
        [
          {field: "id", title: "ID", sort: true, width: 80},
          {field: "name", title: "部门名", width: 300},
          {field: "leader", title: "负责人", width: 120},
          {field: "create_datetime", title: "创建时间", width: 180},
          {field: "update_datetime", title: "更新时间", width: 180},
          {
            fixed: "right",
            title: "操作",
            align: "center",
            width: 150,
            toolbar: "#department-tool",
          },
        ],
      ],
    });

    // 头部工具栏事件 - 新增部门、..
    treeTable.on("toolbar(department-treeTable)", function (obj) {
      if (obj.event === "department-add") {
        window.department_add();
      } else if (obj.event === "department-close") {
        treeTable.expandAll('department-treeTable', false); // 关闭全部节点
      } else if (obj.event === "department-open") {
        treeTable.expandAll('department-treeTable', true); // 展开全部节点
      }
    });

    // 行工具栏事件 - 编辑、删除
    treeTable.on("tool(department-treeTable)", function (obj) {
      if (obj.event === "department-edit") {
        window.department_edit(obj);
      } else if (obj.event === "department-remove") {
        window.department_remove(obj);
      }
    });

    window.department_add = function () {
      let url = "/rbac/department/add.html/";
      layer_open("新增部门", url);
    };

    window.department_edit = function (obj) {
      let url = "/rbac/department/edit.html/?id=" + obj.data.id;
      layer_open("编辑部门", url);
    };

    window.department_remove = function (obj) {
      layer.confirm('确定要删除该部门?', {icon: 3, title: '提示'}, function (index) {
        layer.close(index)
        let url = "/api/v1/department/del/"
        let data = {id: obj.data.id}
        deleteAjaxRequest(popup, obj, url, data)
      })
    }
  });
</script>
</html>


